<template>
	<view class="cart">
		<view class="receive">
			<view class="box" @click="getAddress" v-if="!address.userName">
				<view class="man">
					<view class="man-l">
						请选择收货地址
					</view>
					<view class="man-r">
						<text>></text>
					</view>
				</view>
			</view>
			<view class="box" v-else>
				<view class="man">
					<view class="man-l">
						收货人:  <text>{{address.userName}}</text>
					</view>
					<view class="man-r">
						{{address.telNumber}}<text>></text>
					</view>
				</view>
				<view class="address">
					收货地址:<text>{{allAddress}}</text>
				</view>
			</view>
			<image src="../../static/cart_border@2x.png" mode=""></image>
		</view>
		<view class="goods">
			<view class="title">
				<text class="iconfont icon-shop"></text>优购生活馆
			</view>
			<view class="item" v-for="(item,index) in goodsList" :key="index">
				<view class="check">
					<icon @click="changeCheck(item)" v-if="item.isCheck" type="success" color="#eb4450" size="16"></icon>
					<icon @click="changeCheck(item)" v-else type="success" color="gray" size="16"></icon>
				</view>
				<view class="msg">
					<image @click="toGoodDetail(item.goods_id)" :src="item.goods_small_logo" mode=""></image>
					<view class="intro">
						<view class="top" @click="toGoodDetail(item.goods_id)">
							{{item.goods_name}}
						</view>
						<view class="bottom">
							<view class="price">
								￥<text>{{item.goods_price}}</text>.00
							</view>
							<view class="num">
								<sum-num :num="item.num" @sub="subNum(item,index)" @add="addNum(item)"></sum-num>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sum">
			<view class="s1">
				<icon v-if="isAll" type="success" color="#eb4450" size="16" @click="chooseAll"></icon>
				<icon v-else type="success" color="gray" size="16" @click="chooseAll"></icon>
			</view>
			<view class="s2">
				全选
			</view>
			<view class="s3">
				<view class="s3-t">
					合计:<text>￥<text class="price">{{totalmoney}}</text>.00</text>
				</view>
				<view class="s3-b">
					包含运费
				</view>
			</view>
			<view class="s4" @click="pay">
				结算({{total}})
			</view>
		</view>
	</view>
</template>

<script>
	import sumNum from '../../components/sumNum.vue'
	import fangdou from '../../utils/myfangdou.js'
	export default {
		components:{
			sumNum
		},
		data(){
			return {
				cartList:[],
				ids:'',
				goodsList:[],
				address:{}
			}
		},
		computed:{
			allAddress(){
				return this.address.provinceName + this.address.cityName + this.address.countyName + this.address.detailInfo
			},
			isAll:{
				get(){
					var checks = this.goodsList.map(item=>item.isCheck)
					if(checks.includes(false)){
						return false
					}else{
						return true
					}
				},
				set(value){
					console.log(value)
					this.goodsList.forEach(item=>{
						item.isCheck = value
					})
					this.cartList.forEach(item=>{
						item.isCheck = value
					})
					uni.setStorageSync('cart',this.cartList)
				}
			},
			total:{
				get(){
					var calculate = 0
					this.goodsList.forEach(item=>{
						if(item.isCheck){
							calculate += item.num
						}
					})
					return calculate
				}
			},
			totalmoney:{
				get(){
					var money = 0
					this.goodsList.forEach(item=>{
						if(item.isCheck){
							money += item.num * item.goods_price
						}
					})
					return money
				}
			}
		},
		methods:{
			toGoodDetail(id){
				uni.navigateTo({
					url:'/pages/goodDetail/goodDetail?id=' + id
				})
			},
			// 减法
			subNum(obj,idx){
				console.log('sub')
				if(obj.num == 1){
					uni.showModal({
					    title: '友情提示',
					    content: '是否要删除该商品？',
					    success: res => {
					        if (res.confirm) {
					            console.log('用户点击确定');
											var myIndex = this.cartList.findIndex(item=>{
												return item.goods_id == obj.goods_id
											})
											if(myIndex !== -1){
												this.cartList.splice(myIndex,1)
												this.goodsList.splice(idx,1)
												uni.setStorageSync('cart',this.cartList)
											}
					        } else if (res.cancel) {
					        }
					    }
					});
				}else{
					obj.num -= 1
					var myIndex = this.cartList.findIndex(item=>{
						return item.goods_id == obj.goods_id
					})
					this.cartList[myIndex].num = obj.num
					uni.setStorageSync('cart',this.cartList)
				}
			},
			// 加法
			addNum(obj){
				console.log('add')
				obj.num += 1
				var myIndex = this.cartList.findIndex(item=>{
					return item.goods_id == obj.goods_id
				})
				this.cartList[myIndex].num = obj.num
				uni.setStorageSync('cart',this.cartList)
			},
			chooseAll(){
				this.isAll = !this.isAll
			},
			changeCheck(item){
				item.isCheck = !item.isCheck
				this.cartList.find(cartItem=>{
					if(cartItem.goods_id == item.goods_id){
						cartItem.isCheck = item.isCheck
					}
				})
				uni.setStorageSync('cart',this.cartList)
			},
			async loadData(){
				this.cartList = uni.getStorageSync('cart')
				this.ids = this.cartList.map(item=>item.goods_id).join(',')
				const res = await this.$http({
					method:'get',
					url:'/goods/goodslist?goods_ids=' + this.ids
				})
				res.forEach(item=>{
					var addtion = this.cartList.find(cartItem=>{
						return cartItem.goods_id == item.goods_id
					})
					item.num = addtion.num
					item.isCheck = addtion.isCheck
				})
				this.goodsList = res
			},
			getAddress(){
				uni.chooseAddress({
					success: res => {
						console.log(res)
						this.address = res
						uni.setStorageSync('address',res)
					}
				})
			},
			pay(){
				if(this.total <= 0){
					uni.showToast({
						title:'结算商品数量不能为空~',
						icon:'none'
					})
					return
				}
				if(!this.address.userName){
					uni.showToast({
						title:'请选择收货地址~',
						icon:'none'
					})
					return
				}
				// var token = uni.getStorageSync('token')
				// if(!token){
				// 	uni.navigateTo({
				// 		url:'/pages/login'
				// 	})
				// }
				uni.navigateTo({
					url:'/pages/orderDetail/orderDetail'
				})
			}
		},
		onLoad() {
			this.loadData()
		},
		onShow() {
			this.address = uni.getStorageSync('address')
			this.loadData()
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f4f4f4;
	}
	.cart{
		position: relative;
		padding-bottom: 160rpx;
		.receive{
			background-color: #fff;
			margin-bottom: 20rpx;
			.man{
				padding: 0 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 45rpx;
				.man-l{
					text{
						margin-left: 60rpx;
					}
				}
				.man-r{
					text{
						color: #999999;
						margin-left: 55rpx;
					}
				}
			}
			.address{
				padding: 0 18rpx;
				margin: 55rpx 0 50rpx;
				text{
					margin-left: 25rpx;
				}
			}
			image{
				display: block;
				width: 100%;
				height: 14rpx;
			}
		}
		.goods{
			background-color: #fff;
			.title{
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				padding-left: 32rpx;
				border-bottom: 1rpx solid #dddddd;
				font-size: 18px;
				text{
					color: #999999;
					font-size: 20px;
					margin-right: 12rpx;
				}
			}
			.item{
				width: 100%;
				height: 206rpx;
				display: flex;
				align-items: center;
				.check{
					width: 88rpx;
					text-align: center;
				}
				.msg{
					flex: 1;
					display: flex;
					align-items: center;
					padding: 25rpx 0 20rpx;
					border-bottom: 1rpx solid #dddddd;
					image{
						width: 160rpx;
						height: 160rpx;
						margin-right: 20rpx;
					}
					.intro{
						flex: 1;
						height: 160rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding-right: 18rpx;
						.top{
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						.bottom{
							display: flex;
							justify-content: space-between;
							.price{
								color: #eb4450;
								text{
									font-size: 20px;
								}
							}
							.num{
								
							}
						}
					}
				}
			}
		}
		.sum{
			display: flex;
			position: fixed;
			width: 100%;
			height: 98rpx;
			left: 0;
			bottom: 0;
			background-color: #fff;
			align-items: center;
			.s1{
				width: 88rpx;
				text-align: center;
			}
			.s2{
				flex: 2;
			}
			.s3{
				flex: 4;
				.s3-t{
					text{
						color: #eb4450;
						.price{
							font-size: 20px;
						}
					}
				}
				.s3-b{
					color: #999;
					font-size: 14px;
				}
			}
			.s4{
				flex: 3;
				height: 100%;
				line-height: 98rpx;
				text-align: center;
				color: #fff;
				background-color: #eb4450;
			}
		}
	}
</style>
